<template>
    <div class="hello">
        <header-tab msg="历史战绩"></header-tab>
        <div class="topBox">
            <img :src="bgcImg" alt="" class="bgcImg">
            <div class="smallTopBox spacebetween clearpostion">
                <div class="flexstart">
                    <div>
                        <img :src="users.avatar" alt="" class="img">
                    </div>
                    <div>
                        <img :src="bbImg" alt="" class="bb">
                    </div>
                    <div class="tBox mt20 fz16">
                        <div class="nickName w">{{ users.memberName }}</div>
                        <div class="bbmsg">{{ users.earnings }} 呗币</div>
                    </div>
                </div>
            </div>
            <div class="sbottomBox w fz16 clearpostion">
                <div class="sr">
                    <div class="num">期数</div>
                    <div class="num2">结果</div>
                    <div>竞猜结果</div>
                    <div class="num4">累计收益</div>
                </div>
            </div>
        </div>
        <div class="middleBox1 m0" v-if="historyVal.length > 0">
            <template v-for="(item,index) in historyVal" >
                <div v-if="item.closingIndexResult!=3" class="middleBox fz sr">
                    <div class="ta">{{ item.periodsNumber }}</div>
                    <div class="ta">{{ item.closingIndexResult | style }}</div>
                    <div class="ta">{{ item.guessResult }}</div>
                    <div class="ta">{{ item.earnings }}</div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>

import HeaderTab from '../components/HeaderTab.vue'
import {HistoryResult, memberInfo} from '../api/index'
import {
    getAllToken,
    setAllToken
} from '@/utils/auth'
import {
    Toast
} from 'vant';

export default {
    components: {
        HeaderTab,
        [Toast.name]: Toast
    },
    data() {
        return {
            bgcImg: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/bgc01.png',
            bbImg: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/bb.png',
            memberNo: '',
            users: {
                avatar: "",
                memberName: '奖呗',
                earnings: 0
            },
            historyVal: [],
            style: 2
        }
    },
    mounted() {
        this.memberNo = this.$store.state.user.memberNo || getAllToken("memberNo")
        this.getHistoryResult()
        if (this.memberNo) {
            this.getInfos();
        }
    },
    filters: {
        style(status) {
            if (status == '0') {
                return '跌'
            }
            if (status == '1') {
                return '涨'
            }
            if (status == '2') {
                return '未开盘'
            }
        }
    },
    methods: {
        getHistoryResult() {
            let para = {
                "memberNo": this.$store.state.user.memberNo || getAllToken("memberNo"), //类型：String  必有字段  备注：广告位置编码
            }
            HistoryResult(para).then((res) => {
                if (res.data.code == "000") {
                    // console.log(res)
                    let data = res.data.content
                    data.forEach((item, index) => {
                        // item.closingIndexResult = item.closingIndexResult == 0 ? "跌" : "涨"
                        item.guessResult = item.guessResult == 0 ? "跌" : "涨"
                    })
                    this.historyVal = data
                }
            })

        },

        // 用户信息及bb量
        getInfos() {
            let para = {
                "memberNo": this.$store.state.user.memberNo || getAllToken("memberNo"), //类型：String  必有字段  备注：广告位置编码
            }
            memberInfo(para).then((res) => {
                if (res.data.code == '000') {
                    // console.log(res)
                    this.users = res.data.content;
                    this.users.avatar = this.users.avatar ? this.users.avatar : 'https://cdn.92jiangbei.com/newjiangbei/img/newImg/member/img-touxiang.png';
                } else {
                    Toast('网络异常，稍后重试');
                }
            }).catch((err) => {
            });
        },
    }

}
</script>

<style lang="less" scoped>
.hello {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    padding-bottom: 100px;
    background-color: rgb(10, 0, 62);
    overflow-y: scroll;
}

.bgcImg {
    width: 120%;
    margin-left: -10%;
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}

.topBox {
    overflow-x: hidden;
    border-radius: 20px;

    .nickName {
        margin-left: -22px;
    }

    .smallTopBox {
        width: 100%;
        position: absolute;
        top: 5%;
        margin-top: 40px;
        padding: 0 25px 0 25px;
    }

    .img {
        width: 63px;
        height: 63px;
        border-radius: 32px;
        margin-right: 10px;
    }

    .bb {
        width: 15px;
        height: 15px;
        margin-top: 11.8vw;
        margin-right: 7px;
    }

    .bbmsg {
        color: rgb(#FFE733);
    }

    .sbottomBox {
        width: 100%;
        margin-top: 20px;
        position: absolute;
        top: 13%;
        margin-top: 80px;

        .num {
            margin-left: 15px;
        }

        .num2 {
            margin-left: 15px;
        }

        .num4 {
            margin-right: 5px;
        }
    }

}

.middleBox1 {
    overflow-x: hidden;
    width: 95%;
    background: rgba(255, 255, 255, 0.9);

    .middleBox {
        display: flex;
        color: #5D5D5D;
        padding-top: 10px;
        padding-bottom: 10px;

        .ta {
            width: 100px;
        }
    }
}
</style>
